<template>
  <div class="comer">
    <CommonHeader ></CommonHeader>
    <!--    <div class='commonHeader'>-->
    <!--      <div class="left">-->
    <!--        <img src="../assets/images/logo2.png" alt="" class="logopng">-->
    <!--        <span class="city">杭州 <img src="../assets/images/bottom.png" alt="" class="bottomstyle"></span>-->
    <!--      </div>-->
    <!--      <div class="right">-->
    <!--        <div class='searchCont2'>-->
    <!--          <el-input placeholder="请输入楼盘名称/区域" v-model="searchInput" clearable>-->
    <!--            <template #append>-->
    <!--              <el-button icon="el-icon-search">搜索</el-button>-->
    <!--            </template>-->
    <!--          </el-input>-->
    <!--        </div>-->
    <!--      <div class="divss">-->
    <!--        <img src="../assets/images/dowphone.png" alt="" class="downphone">-->
    <!--        <span style="margin-left: 0px">下载APP</span>-->
    <!--      </div>-->
    <!--      </div>-->
    <!--    </div>-->
    <div class="all">
      <div class="naver">
        <div class="tit"><img src="../assets/images/ding.png" alt="" style="width: 10px;height: 14px;margin-right: 10px">房品优选平台 >
          {{cityName}}楼盘 >{{ name }}</div>
        <div class="linearea">
          <span v-for="(item,index) in list" :key="index" :class="choosen==index?'red':'normal'" @click="chosecity(index)">{{item.name}}</span>
        </div>
      </div>
      <div v-if="choosen==0" class="agentall1">
        <div class="result">
          <!-- 新房内容 -->
          <div class='newHousePurse'>
            <Carousel :imgSrc="imgSrc" :imagesList="imagesList" />
          </div>
          <div class="rightmodel">
            <div class="tit">{{ name }}</div>
            <div class="linearea">
             <span :class="top[index]"
                   v-for="(item,index) in listall" :style="randomRgb(item)" :key="index">
               {{item.labelContent}}
             </span>
            </div>
            <div class="lineprice">
              <span class="topp">最高补贴：</span>
              <span class="topprice">{{ subsidyStart }}元/套</span>
            </div>
            <div class="Housetype">
              <span class="left">主力户型：</span>
              <span class="right" v-if="householdType!=''">{{householdType}}(建面{{houseArea}}m²)</span>
              <span class="right" v-else>暂未公布</span>
            </div>
            <div class="Housetype">
              <span class="left">楼盘地址：</span>
              <span class="right">{{ address }}</span>
              <img src="../assets/images/ding.png" alt="" style="width: 10px;height: 14px;margin-left: 10px">
            </div>
            <div class="more">更多详细信息>></div>
            <div class="phoneal">咨询热线：{{ phone }}</div>
            <div class="heheh">致电房品优选了解更多信息，安全可靠真实房源</div>
            <div class="bgyg">
              <div class="tit1">房品优选便宜不只一点</div>
              <div class="tit2">专注一手新房</div>
            </div>
          </div>
        </div>

        <div class="tipline">楼盘基本信息</div>
        <div class="model2">
          <div class="left">
            <div v-for="(item,index) in model2left" :key="index" class="lin">
              <span class="txt">{{ item.labelName }}:</span>
              <span class="word" v-if="item.value!=''&&item.value!=null">{{ item.value }}</span>
              <span class="word" v-else>暂无</span>
            </div>
          </div>
        </div>
        <div class="modelss">
          <div class="rightinput">
            <input type="text" placeholder="请输入您的手机号" >
            <span>帮我找房</span>
          </div>
        </div>
        <div class="tipline">楼盘动态</div>
        <div class="model8">
          <div v-for="(item,index) in model8left" :key="index" class="lin">
            <div class="left">
              <div class="p1">
                <span class="p1one">楼盘动态</span>
                <span class="p1two">{{name}}</span>
              </div>
              <div class="p2">{{item.content}}</div>
            </div>
            <div class="right">
              {{item.commentTime}}
            </div>
          </div>
        </div>
        <div class="tipline">楼盘简评</div>
        <div class="model2">
          <div class="left">
            <div v-for="(item,index) in introduce" :key="index" class="lin">
              <span class="txt">{{ item.name }}:</span>
              <span class="word">{{ item.value }}</span>
            </div>
          </div>
        </div>
        <div class="tipline">{{ name }}位置周边</div>
        <div style="display:flex">
          <div id="panel" style="overflow: auto;height: 300px;"></div>
          <div id="container" style="width:800px; height:300px"></div>

        </div>

        <div class="tipline">猜你喜欢</div>
        <div class="resultlistall">
          <div class="resultline" v-for="(item,index) in listline" :key="index">
            <div class="lineleft">
              <div class="leftimg">
                <img src="../assets/images/resuletleft.png" alt="" class="leftimgstyle">
              </div>
              <div class="leftright">
                <div class="tit">
                  {{ item.name }}
                  <span class="nowsell">{{ item.sellState }}</span>
                </div>
                <div class="minitip">
                  <span class="minitipleft">地址</span>
                  <span class="minitipright">{{ item.address }}</span>
                  <img src="../assets/images/dizhi.png" alt="" class="minitipimg">
                </div>
                <div class="minitip">
                  <span class="minitipleft">户型</span>
                  <span class="minitipright" v-if="item.householdType!=null">{{ item.householdType }}</span>
                  <span class="minitipright" v-else>暂未公布</span>
                </div>
                <div class="minitip">
                  <span class="minitipleft">建面</span>
                  <span class="minitipright" v-if="item.houseArea!=null">{{ item.houseArea }}</span>
                  <span class="minitipright" v-else>暂未公布</span>
                </div>
                <div class="lastminitip">
                  <span v-for="(item,index) in item.houseLabelList" :key="index" class="lastmini">{{item.labelContent}}</span>
                </div>
              </div>
            </div>
            <div class="lineright">
              <div class="rightlineone">最高补贴 <span style="font-size: 24px;color: #F22525">{{ item.subsidyStart }}</span>/套</div>
              <div class="rightlinetwo">历史均价：{{ item.averagePrice }}m²</div>
              <div class="rightlinethree" @click="chosedetail(item)"><span class="look" >查看详情</span></div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="choosen==1" class="agentall2">
        <div class="detailright">
          <span class="righttit">{{ name }}</span>
          <span class="nowsell">{{ sellState }}</span>
          <div class="nowprice">
            <span style="font-size: 14px;font-weight: bold">最高补贴：</span>
            <span style="font-size: 18px;font-weight: bold">{{ subsidyStart }}元</span>
            <span style="font-size: 14px;font-weight: bold">/套</span>
          </div>
        </div>
        <div class="tipline">楼盘基本信息</div>
        <div class="model2">
          <div class="left">
            <div v-for="(item,index) in model2left" :key="index" class="lin">
              <span class="txt">{{ item.labelName }}:</span>
              <span class="word" v-if="item.value!=''&&item.value!=null">{{ item.value }}</span>
              <span class="word" v-else>暂无</span>
            </div>
          </div>
        </div>
        <div class="tipline">建筑信息</div>
        <div class="model2">
          <div class="left">
            <div v-for="(item,index) in model2left" :key="index" class="lin">
              <span class="txt">{{ item.labelName }}:</span>
              <span class="word" v-if="item.value!=''&&item.value!=null">{{ item.value }}</span>
              <span class="word" v-else>暂无</span>
            </div>
          </div>
        </div>
        <div class="tipline">物业信息</div>
        <div class="model2">
          <div class="left">
            <div v-for="(item,index) in model2left" :key="index" class="lin">
              <span class="txt">{{ item.labelName }}:</span>
              <span class="word" v-if="item.value!=''&&item.value!=null">{{ item.value }}</span>
              <span class="word" v-else>暂无</span>
            </div>
          </div>
        </div>
        <div class="tipline">项目简介</div>
        <div class="model3">
          {{introducedetail}}
        </div>
        <div class="tipline">项目特色</div>
        <div class="model3">
          <!--          <div v-for="(item,index) in nowlista" :key="index">-->
          <!--            {{item.word}}-->
          <!--          </div>-->
          {{Projectfeatures}}
        </div>
        <div class="tipline">免责声明</div>
        <div class="model3">
          楼盘信息来源于开发商，政府公示网站，第三方公众平台，最终以政府部门登记备案为准，如楼盘信息有误或其他问题。请及时向我们反馈和举报，联系电话：{{ phone }}，我们能将第一时间予以核实与更正。
        </div>
      </div>
    </div>
    <CommonBottom></CommonBottom>
  </div>
</template>
<script>
import CommonHeader from '../components/commonHeader'
import Carousel from '@/components/swiper/Carousel';
import CommonBottom from "@/components/commonBottom";
import AMap from 'AMap'
import {updateUser} from "@/api/vip";
export default {
  name:'Home',
  components:{
    CommonHeader,
    CommonBottom,
    Carousel
  },
  data(){
    return{
      name:'',
      address:'',
      phone:'',
      householdType:'',
      houseArea:'',
      top:[
        "top1",
        "top2",
        "top3",
        "top4",
        "top5",
        "top6",
      ],
      // imgSrc: require("../assets/images/pic1.png"), //默认显示大图
      imgSrc:'', //默认显示大图
      model2left:[],
      model8left:[],
      nowlista:[{
        name:'楼盘名称',
        word:'1. 位于未来科技城西，也是目杭州唯一不限购的区，新杭州人、投资客最后的上车洼地。'
      },{
        name:'户型面积',
        word:'2. 临安最繁华的中心，近邻地铁16号线人民广场站，不用换乘直达未来科技城'
      },{
        name:'均 价',
        word:'3. 距最繁华的购物中心——万华广场近800米，享人民广场7万方地下商场'
      },{
        name:'补贴金额',
        word:'4. 邻临安最好的学校——晨曦小学、锦城四中，周边天目初/高中、米了云彩幼儿园等名校环绕'
      },{
        name:'楼盘地址',
        word:'5. 三甲临安人民医院、妇幼保健院、博爱医院等护航健康'
      },{
        name:'楼盘地址',
        word:'6. 毗邻国家级森林公园玲珑山，出则繁华入则宁静，是投资置业的不二之选'
      }
      ],
      listall:[],
      imagesList: [
        //缩略图：

      ],
      swiperOptionTop: {
        loop: true,
        loopedSlides: 5, // looped slides should be the same
        spaceBetween: 10,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      },
      swiperOptionThumbs: {
        loop: true,
        loopedSlides: 5, // looped slides should be the same
        spaceBetween: 10,
        centeredSlides: true,
        slidesPerView: 'auto',
        touchRatio: 0.2,
        slideToClickedSlide: true
      },
      list:[
        {name:"楼盘首页",value:0},
        {name:"楼盘详情",value:1},
      ],
      listline:[],
      choosen:0,
      tips:[
        {tip:'住宅'},
        {tip:'商业配套'},
        {tip:'多轨交汇'},
      ],
      houseId:'',
      allspa:[],
      introduce:[],
      youlikelist:[],
      lat:'',
      lon:'',
      LonAndLat:{},
      cityName:'',
      subsidyStart:'',
      sellState:'',
      introducedetail:'',
      Projectfeatures:'',
      pageNum: 1,
      pageSize: 10,
      trendCount:'',
      types: [{
        title: '楼盘动态',
        anchor: '#one'
      },
        {
          title: '楼盘简评',
          anchor: '#two'
        },
        {
          title: '周边配套',
          anchor: '#three'
        },
        {
          title: '好房推荐',
          anchor: '#four'
        }
      ],
    }
  },
  created() {
    // this.houseId=this.$route.params.houseId
    this.houseId=localStorage.getItem('houseId');
    console.log(this.$route.params.houseId,'99')
    let all=localStorage.getItem('Companyinformation')
    this.phone=JSON.parse(all).companyPhone
  },
  mounted() {
    this.housedetail()
    this.housedetailinfo()
    this.easyintroduce()
    this.youlike()
    this.getLonAndLatOfHouse()
    this.getHouseStatus()
  },
  methods:{
    chosedetail(item){
      console.log('999',item.id)
      localStorage.setItem('houseId',item.id);
      this.$router.push({
        name: 'detail2',
        // params:{
        //   houseId:item.id,
        // }
      })
    },
    randomRgb(item) {
      // let R = Math.floor(Math.random() * 130+110);
      // let G = Math.floor(Math.random() * 130+70);
      // let B = Math.floor(Math.random() * 130+110);
      // eslint-disable-next-line no-unused-vars
      let R = Math.floor(Math.random() );
      // eslint-disable-next-line no-unused-vars
      let G = Math.floor(Math.random());
      // eslint-disable-next-line no-unused-vars
      let B = Math.floor(Math.random() );
      return {
        // background: 'rgb(' + R + ',' + G + ',' + B + ')'
        // background:'rgb(' + R + ',' + G + ',' + B + ')'
      };
    },

    chosecity(index){
      this.choosen=index
      this.getLonAndLatOfHouse()
    },
    getall(){
      var that=this
      var map = new AMap.Map('container', {
        center:[that.LonAndLat.lon,that.LonAndLat.lat],
        zoom:11,
        resizeEnable: true
      });
      var marker = new AMap.Marker({
        position: [that.LonAndLat.lon,that.LonAndLat.lat]//位置
      })
      map.add(marker);//添加到地图
      console.log(AMap,marker.position,'有点像')

      AMap.service(["AMap.PlaceSearch"], function() {
        //构造地点查询类
        var placeSearch = new AMap.PlaceSearch({
          type: '美食,KTV,地铁站,公交站', // 兴趣点类别
          pageSize: 15, // 单页显示结果条数
          pageIndex: 1, // 页码
          // city: "010", // 兴趣点城市
          citylimit: true,  //是否强制限制在设置的城市内搜索
          map: map, // 展现结果的地图实例
          panel: "panel", // 结果列表将在此容器中进行展示。
          autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
        });
        var cpoint = [that.LonAndLat.lon,that.LonAndLat.lat]; //中心点坐标
        placeSearch.searchNearBy('', cpoint, 2000, function(status, result) {//2000是我搜索的范围 cpoint是中心
          console.log(status, result)
        });
      });
    },

    housedetail(){
      const time =this.time();
      let params = {
        action:'website.getMainInfoOfHouseDetail',
        timestamp: time,
        signature: this.clos_encryptDes("website.getMainInfoOfHouseDetail", time),
        accessKeyId: "APId1482c4fc9",
        deviceId:'1',
        cityId:localStorage.getItem('cityId'),
        houseId:this.houseId
      }
      updateUser(params).then(
          (res) => {
            if (res.data.statusCode == 201 && res.data.success == true) {
              this.name=res.data.data.name
              this.listall=res.data.data.houseLabelList
              this.address=res.data.data.address
              this.householdType=res.data.data.householdType
              this.houseArea=res.data.data.houseArea
              this.subsidyStart=res.data.data.subsidyStart
              this.sellState=res.data.data.sellState
              this.cityName=localStorage.getItem('cityName')
              for(var i=0;i<res.data.data.imagePojoList.length;i++){
                this.allspa.push(res.data.data.imagePojoList[i].imageNormalUrl)
              }
              this.imagesList=this.allspa
              localStorage.setItem('imagesList',JSON.stringify(this.allspa));
              console.log(this.imagesList,'有什么图')
              this.imgSrc=this.allspa[0]

            }else{
              this.loading = false;
            }
          }).catch((error) => {
        console.log(error,'99');

      });
    },
    //楼盘动态
    getHouseStatus(){
      let that = this
      const time =this.time();
      let params = {
        action:'houseManage.getHouseContent',
        timestamp: time,
        signature: this.clos_encryptDes("houseManage.getHouseContent", time),
        accessKeyId: "APId1482c4fc9",
        deviceId:'1',
        houseId: this.houseId,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }
      updateUser(params).then(
          (res) => {
            if (res.data.statusCode == 201 && res.data.success == true) {
              // if(res.data.dataCount == 0){
              //   var index = that.types.findIndex(function(item) {
              //     return item.title === "楼盘动态";
              //   });
              //   // console.log(index)
              //   that.types.splice(index, 1)
              //   // console.log(that.types);
              // }
              that.trendCount = res.data.data.dataCount
              that.model8left = res.data.data.rs
              console.log(res,that.model8left,'000102010')

            }else{
              this.loading = false;
            }
          }).catch((error) => {
        console.log(error,'99');

      });
    },
    //楼盘基本信息
    housedetailinfo(){
      const time =this.time();
      let params = {
        action:'house.getHouseDetail',
        timestamp: time,
        signature: this.clos_encryptDes("house.getHouseDetail", time),
        accessKeyId: "APId1482c4fc9",
        deviceId:'1',
        houseId:this.houseId
      }
      updateUser(params).then(
          (res) => {
            if (res.data.statusCode == 201 && res.data.success == true) {
              this.model2left=res.data.data
              let ddooo=res.data.data
              ddooo.forEach(item=>{
                if(item.labelName=='项目简介'){
                  this.introducedetail=item.value
                }
                if(item.labelName=='项目特色'){
                  this.Projectfeatures=item.value
                }
              })
            }else{
              this.loading = false;
            }
          }).catch((error) => {
        console.log(error,'99');

      });
    },
    //地理坐标
    getLonAndLatOfHouse(){
      const time =this.time();
      let params = {
        action:'house.getLonAndLatOfHouse',
        timestamp: time,
        signature: this.clos_encryptDes("house.getLonAndLatOfHouse", time),
        accessKeyId: "APId1482c4fc9",
        deviceId:'1',
        houseId:this.houseId
      }
      updateUser(params).then(
          (res) => {
            if (res.data.statusCode == 201 && res.data.success == true) {
              // console.log(res.data,'是坐标dui---- ');
              this.LonAndLat=res.data.data[0]
              console.log(this.LonAndLat,res,'是坐标dui---- ');
              // this.lat=res.data.data[0].lat
              // this.lon=res.data.data[0].lon
              this.getall()
            }else{
              this.loading = false;
            }
          }).catch((error) => {
        console.log(error,'是坐标wsm报错吗');
      });
    },
    //  楼盘简评
    easyintroduce(){
      const time =this.time();
      let params = {
        action:'houseSupport.getHouseComment',
        timestamp: time,
        signature: this.clos_encryptDes("houseSupport.getHouseComment", time),
        accessKeyId: "APId1482c4fc9",
        deviceId:'1',
        houseId:this.houseId
      }
      updateUser(params).then(
          (res) => {
            if (res.data.statusCode == 201 && res.data.success == true) {
              this.introduce=res.data.data.showUnitList
            }else{
              this.loading = false;
            }
          }).catch((error) => {
        console.log(error,'99');

      });
    },
    //  猜你喜欢
    youlike(){
      const time =this.time();
      let params = {
        action:'house.getHotHouseList',
        timestamp: time,
        signature: this.clos_encryptDes("house.getHotHouseList", time),
        accessKeyId: "APId1482c4fc9",
        deviceId:'1',
        cityId:localStorage.getItem('cityId'),
      }
      updateUser(params).then(
          (res) => {
            if (res.data.statusCode == 201 && res.data.success == true) {
              this.listline=res.data.data.rs
            }else{
              this.loading = false;
            }
          }).catch((error) => {
        console.log(error,'99');

      });
    },
  }
}
</script>

<style scoped lang="scss">
.comer{
  //.commonHeader{
  //  height:88px;
  //  padding:0 220px;
  //  box-sizing: border-box;
  //  display: flex;
  //  justify-content: space-between;
  //  align-items: center;
  //  font-size: 18px;
  //    .left{
  //      //flex:1;
  //      width: 300px;
  //      display: flex;
  //      justify-content: space-around;
  //      cursor: pointer;
  //      margin-top: -30px;
  //      .logopng{
  //        width:121px;
  //        height: 32px;
  //        vertical-align: middle;
  //        //line-height: 88px;
  //        margin-top: 28px;
  //      }
  //      .city{
  //        padding-bottom:4px;
  //        box-sizing: border-box;
  //        display: inline-block;
  //        border: 1px solid #999999;
  //        border-radius: 3px;
  //        width: 67px;
  //        height: 25px;
  //        margin-top:32px ;
  //        font-size: 12px;
  //        line-height: 25px;
  //        .bottomstyle{
  //          vertical-align: middle;
  //        }
  //      }
  //    }
  //   .right{
  //      margin-left: 80px;
  //      //flex:1;
  //      position: relative;
  //      display: flex;
  //      justify-content: space-between;
  //      cursor: pointer;
  //      font-size: 14px;
  //     width: 400px;
  //      .searchCont2{
  //        position: relative;
  //        width:296px;
  //        .el-input-group__append{
  //          background-color:#F22525!important;
  //          border-radius: 0px 31px 31px 0px;
  //          color:#ffffff;
  //        }
  //        .el-icon-search{
  //          color: #ffffff;
  //        }
  //        .el-button span{
  //          color: #ffffff;
  //        }
  //      }
  //      .divss{
  //        position: relative;
  //        width: 100px;
  //        margin-top: 15px;
  //        margin-left: 10px;
  //        .downphone{
  //          width: 9px;
  //          height: 16px;
  //          position: absolute;
  //          left: 10px;
  //          top: 2px;
  //          //vertical-align: middle;
  //        }
  //      }
  //    }
  //  }
  .all{
    padding:0 190px;
    .naver{
      text-align: left;
      .tit{
        height: 60px;
        font-size: 18px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #141414;
        line-height: 60px;
      }
      .linearea{
        height: 50px;
        background: #F6F6F6;
        line-height: 50px;
        //padding-left: 30px;
        .red{
          font-size: 14px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #F22525;
          cursor:pointer;
          border-bottom: 3px solid #F22525;
          padding-bottom: 14px;
          margin-left: 40px;
        }
        .normal{
          font-size: 14px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #141414;
          //margin-right: 10px;
          cursor:pointer;
          margin-left: 40px;
        }
      }
    }
    .agentall1{
      .result{
        display: flex;
        justify-content: flex-start;
        box-sizing: border-box;
        margin: 50px 0;
        .newHousePurse{
          box-sizing: border-box;
        }
        .rightmodel{
          margin-left: 30px;
          text-align: left;
          .tit{
            font-size: 26px;
            font-family: Source Han Sans CN;
            font-weight: bold;
            color: #141414;
          }
          .linearea{
            margin-top: 20px;
            .top1{
              color: #f2c311;
              border: 1px solid #f2c311;
              border-radius:4px ;
              margin-right:4px ;
              padding: 2px;
              font-size: 12px;
            }
            .top2{
              color: #1cbb9b;
              border: 1px solid #1cbb9b;
              border-radius:4px ;
              margin-right:4px ;
              padding: 2px;
              font-size: 12px;
            }
            .top3{
              color:purple;
              border: 1px solid purple;
              border-radius:4px ;
              margin-right:4px ;
              padding: 2px;
              font-size: 12px;
            }
            .top4{
              color:blue;
              border: 1px solid blue;
              border-radius:4px ;
              margin-right:4px ;
              padding: 2px;
              font-size: 12px;
            }
            .top5{
              color:red;
              border: 1px solid red;
              border-radius:4px ;
              margin-right:4px ;
              padding: 2px;
              font-size: 12px;
            }
            .top6{
              color:green;
              border: 1px solid green;
              border-radius:4px ;
              margin-right:4px ;
              padding: 2px;
              font-size: 12px;
            }
          }
          .lineprice{
            height: 50px;
            line-height: 50px;
            .topp{
              font-size: 14px;
              font-family: Source Han Sans CN;
              font-weight: bold;
              color: #141414;
              display: inline-block;
              width:76px;
            }
            .topprice{
              font-size: 24px;
              font-family: Source Han Sans CN;
              font-weight: bold;
              color: #F22525;
            }
          }
          .Housetype{
            height: 30px;
            line-height: 30px;
            .left{
              font-size: 14px;
              font-family: Source Han Sans CN;
              font-weight: bold;
              color: #141414;
              display: inline-block;
              width:76px;
            }
            .right{
              font-size: 14px;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #141414;
            }
          }
          .more{
            height: 40px;
            font-size: 14px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #141414;
            line-height: 40px;
            border-bottom: 1px solid #E0E0E0;
          }
          .phoneal{
            height: 85px;
            font-size: 30px;
            font-family: Source Han Sans CN;
            font-weight: bold;
            color: #F22525;
            line-height: 85px;
          }
          .heheh{
            height: 40px;
            font-size: 14px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #141414;
            line-height: 40px;
          }
          .bgyg{
            width: 500px;
            height: 70px;
            background: url("../assets/images/bg_yh.png");
            background-size: 100% 100%;
            box-sizing: border-box;
            padding: 10px 20px;
            margin-top: 20px;
            .tit1{
              height: 30px;
              font-size: 14px;
              font-family: Source Han Sans CN;
              font-weight: bold;
              color: #141414;
              line-height: 30px;
            }
            .tit2{
              height:20px;
              font-size: 14px;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #666666;
              line-height: 20px;
            }
          }
        }
      }
      .model8{
        text-align: left;
        margin: 20px 0;
        .lin{
          height: 80px;
          line-height: 40px;
          display: flex;
          justify-content: space-between;

          .p1{
            .p1one{
              background: rgba(92, 135, 195, 0.08);
              border-radius: 3px;
              display: inline-block;
              padding: 4px 6px;
              margin-right: 6px;
              font-size: 14px;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #5C87C3;
            }
            .p1two{
              font-size: 16px;
              font-family: Source Han Sans CN;
              font-weight: bold;
              color: #141414;
            }
          }
          .p2{
            font-size: 14px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #141414;
          }
        }
        .right{
          height: 80px;
          line-height: 80px;
          font-size: 14px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #666666;
        }
      }
      .model2{
        display: flex;
        justify-content: space-between;
        width: 100%;
        .left{
          //display: flex;
          //justify-content: space-between;
          margin-top: 40px;
          width: 100%;
          .lin{
            text-align: left;
            float: left;
            width: 50%;
            line-height: 30px;
            display: flex;
            .txt{
              display: inline-block;
              width:120px;
              line-height: 30px;
            }
            .word{
              line-height: 30px;
              display: inline-block;
              overflow: hidden;
              width: 400px;
              white-space: nowrap;/*不换行*/
              text-overflow:ellipsis;/*超出部分文字以...显示*/
              //word-wrap:break-word;
              //
              //word-break:normal;
            }
          }
        }
      }
      .modelss{
        background: url("../assets/images/modelssbg.png");
        background-size: 100% 100%;
        height:68px ;
        margin: 30px 0;
        position: relative;
        .rightinput{
          position: absolute;
          right: 26px;
          top: 10px;
          border: 0.5px solid #cccccc;
          box-shadow: 0px 9px 28px 0px rgba(195, 164, 110, 0.23);
          border-radius: 0px 3px 3px 0px;
          cursor: pointer;
          input{
            height: 40px;
            line-height: 40px;
            text-indent: 8px;
            outline: none;
            width: 220px;
          }
          span{
            display: inline-block;
            font-size: 14px;
            font-family: Source Han Sans CN;
            font-weight: 300;
            color: #FFFFFF;
            height: 20px;
            background: linear-gradient(0deg, #C0A069, #E9D5AC);
            padding: 11px 11px;
          }
        }
      }
      .tipline{
        font-size: 26px;
        height: 70px;
        line-height: 70px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #141414;
        text-align: left;
        border-bottom: 1px solid #cccccc;
        text-indent: 2px;
      }
      .resultlistall{
        .resultline{
          display: flex;
          justify-content: space-between;
          margin-top: 30px;
          .lineleft{
            display: flex;
            justify-content: flex-start;
            .leftimg{
              .leftimgstyle{

              }
            }
            .leftright{
              text-align: left;
              margin-left: 20px;
              .tit{
                //height: 23px;
                font-size: 20px;
                font-family: Source Han Sans CN;
                font-weight: bold;
                color: #141414;
                //line-height: 50px;
                .nowsell{
                  display: inline-block;
                  background: #3388FF;
                  border-radius: 3px;
                  height: 11px;
                  line-height: 11px;
                  padding:5px 5px;
                  font-size: 12px;
                  font-family: Source Han Sans CN;
                  font-weight: 300;
                  color: #FFFFFF;
                }
              }
              .minitip{
                height: 37px;
                font-size: 14px;
                font-family: Source Han Sans CN;
                font-weight: 400;
                color: #666666;
                line-height: 37px;
                .minitipleft{
                  display: inline-block;
                  width: 46px;
                }
                .minitipright{

                }
                .minitipimg{
                  width: 13px;
                  height: 15px;
                  margin-left: 3px;
                }
              }
              .lastminitip{
                margin-top: 17px;
                .lastmini{
                  display: inline-block;
                  background: #F1F7FF;
                  border-radius: 3px;
                  padding: 2px 5px;
                  font-size: 12px;
                  font-family: Source Han Sans CN;
                  font-weight: 300;
                  color: #666666;
                  margin-right: 5px;
                }
              }
            }
          }
          .lineright{
            text-align: right;
            .rightlineone{
              height: 40px;
              font-size: 14px;
              font-family: Source Han Sans CN;
              font-weight: bold;
              color: #F22525;
              line-height: 40px;
              margin-top: 30px;
            }
            .rightlinetwo{
              height: 50px;
              font-size: 16px;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #666666;
              line-height: 50px;
            }
            .rightlinethree{
              margin-top: 25px;
              cursor: pointer;
              .look{
                display: inline-block;
                width: 67px;
                height: 25px;
                background: #FFFFFF;
                border: 1px solid #3388FF;
                border-radius: 3px;
                font-size: 14px;
                font-family: Source Han Sans CN;
                font-weight: 300;
                color: #3388FF;
                line-height: 25px;
                text-align: center;
              }
            }
          }
        }
      }

    }
    .agentall2{
      .detailright{
        height: 60px;
        line-height: 60px;
        text-align: left;
        .righttit{
          font-size: 26px;
          font-family: Source Han Sans CN;
          font-weight: bold;
          color: #141414;
        }
        .nowsell{
          font-size: 14px;
          font-family: Source Han Sans CN;
          font-weight: 300;
          color: #FFFFFF;
          background: #3388FF;
          border-radius: 3px;
          padding: 4px;
          margin: 0 15px;
        }
        .nowprice{
          font-size: 14px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #F22525;
          display: inline-block;
          margin-left: 30px;
          span{
            font-size: 14px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #F22525;
          }
        }
      }
      .model2{
        display: flex;
        justify-content: space-between;
        width: 100%;
        .left{
          margin-top: 40px;
          width: 100%;
          .lin{
            display: flex;
            justify-content: flex-start;
            text-align: left;
            width: 50%;
            float: left;
            line-height: 30px;
            .txt{
              display: inline-block;
              width: 120px;
              line-height: 30px;
            }
            .word{
              line-height: 30px;
              display: inline-block;
              overflow: hidden;
              width: 400px;
              white-space: nowrap;/*不换行*/
              text-overflow:ellipsis;/*超出部分文字以...显示*/
              //text-overflow: ellipsis;
              //white-space: nowrap;

            }
          }
        }
      }
      .model3{
        //height: 39px;
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #666666;
        line-height: 24px;
        margin: 40px 0;
        text-align: left;
      }
      .tipline{
        font-size: 26px;
        height: 70px;
        line-height: 70px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #141414;
        text-align: left;
        border-bottom: 1px solid #cccccc;
        text-indent: 2px;
      }
    }
  }
}
</style>
<style lang="scss">
.searchCont2{
  position: relative;
  width:296px;
  .el-input-group__append{
    background-color:#F22525!important;
    border-radius: 0px 4px 4px 0px;
    color:#ffffff;
  }
  .el-icon-search{
    color: #ffffff;
  }
  .el-button span{
    color: #ffffff;
  }
  .el-input__inner{
    height: 48px;
    line-height: 48px;
    width: 200px;
  }
}
//.commonHeader div:nth-child(2) {
//   margin-left: 0px!important;
//   width: 100px;
//}
//.commonHeader{
//  padding: 0 190px;
//}
</style>
